<template>
  <div class="page flex-col">
    <div class="section_1 flex-col justify-between">
      <div class="section_2 flex-row">
        <img class="image_1" referrerpolicy="no-referrer" src="../assets/header.png"/>
        <span class="paragraph_1">{{ date | parseTime }}&nbsp;&nbsp;{{ date | parseWeek }}</span>
      </div>
      <div class="section_3 flex-col"><div class="group_1 flex-col"></div></div>
      <div class="section_4 flex-col">
        <div class="group_2 flex-row">
          <div class="image-text_1 flex-row justify-between">
            <img class="label_1" src="../assets/icon_news.png" />
            <span class="text-group_1">欢迎使用一站式自助服务系统，就诊前请先签到排队！</span>
          </div>
        </div>
        <div class="grid_1 flex-row">
          <div @click="toPath()" class="block_1 flex-col">
            <div class="text-group_2 flex-col justify-between">
              <span class="text_1">核酸开单</span>
              <span class="text_2">Nucleic&nbsp;acid&nbsp;billing</span>
            </div>
            <img class="image_2" src="../assets/2.png" />
          </div>

          <div @click="toPath()" class="block_2 flex-col">
            <div class="text-group_3 flex-col justify-between">
              <span class="text_3">发就诊码</span>
              <span class="paragraph_2">Register&nbsp;Medical&nbsp;<br />QR&nbsp;Code</span>
            </div>
            <img class="image_3" src="../assets/3.png" />
          </div>

          <div @click="toPath()" class="block_3 flex-col">
            <div class="text-wrapper_1 flex-row">
              <span class="text_4">当日挂号</span>
            </div>
            <div class="text-wrapper_2 flex-row">
              <span class="text_5">Registration</span>
            </div>
            <div class="image-wrapper_1 flex-row">
              <img class="image_4" src="../assets/2.png" />
            </div>
          </div>
          
          <div @click="toPath()" class="block_4 flex-col">
            <div class="text-wrapper_3 flex-row">
              <span class="text_6">门诊缴费</span>
            </div>
            <div class="text-wrapper_4 flex-row">
              <span class="paragraph_3">Outpatient&nbsp;<br />Payment</span>
            </div>
            <div class="image-wrapper_2 flex-row">
              <img class="image_5" src="../assets/4.png" />
            </div>
          </div>
          <div @click="toPath()" class="block_5 flex-col">
            <div class="text-group_4 flex-col justify-between">
              <span class="text_7">预约挂号</span>
              <span class="paragraph_4">Outpatient&nbsp;<br />Registration</span>
            </div>
            <div class="image-wrapper_3 flex-row">
              <img class="image_6" src="../assets/5.png" />
            </div>
          </div>
          <div @click="toPath()" class="block_6 flex-col">
            <div class="text-group_5 flex-col justify-between">
              <span class="text_8">挂号退号</span>
              <span class="text_9">Cancel&nbsp;Registration</span>
            </div>
            <img class="image_7" src="../assets/6.png" />
          </div>
          <div @click="toPath()" class="block_7 flex-col">
            <div class="text-group_6 flex-col justify-between">
              <span class="text_10">费用查询</span>
              <span class="text_11">Expenses&nbsp;Inquiring</span>
            </div>
            <img class="image_8" src="../assets/4.png" />
          </div>
          <div @click="toPath()" class="block_8 flex-col">
            <div class="text-group_7 flex-col justify-between">
              <span class="text_12">物价查询</span>
              <span class="text_13">Price&nbsp;Inquiring</span>
            </div>
            <div flex-row>
              <img class="image_9" src="../assets/4.png" />
            </div>
          </div>
          <div @click="toPath()" class="block_9 flex-col">
            <div class="text-group_8 flex-col justify-between">
              <span class="text_14">驾驶员体检</span>
              <span class="paragraph_5">Driver&nbsp;medical&nbsp;<br />examination</span>
            </div>
            <img class="image_10" src="../assets/7.png" />
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer_left">
          <div>编号: MU000008</div>
          <div>版本: V5.0.2202.2827</div>
        </div>
        <img class="footer_image" src="../assets/logo_bank1.png" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
        return {
            date: new Date(),
            timer: null
        }
    },
    mounted() {
        var _this = this
        this.timer = setInterval(() => {
            _this.date = new Date()
        }, 1000)
    },
    methods:{
      toPath(){
        console.log("核酸开单")
      }
    }
};
</script>
<style scoped>
@import "../static/index.css";
</style>